<template>
  <div>
    <div class="btnBox flex">
      <!-- 打印按钮 -->
      <el-button class="btn" type="primary" v-print="printObj">打印</el-button>
    </div>
    <!-- 需要打印的内容 -->
    <SimpleTable
      id="printMe"
      :customTableThData="customTableThData"
      :customTableData="customTableData"
    ></SimpleTable>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

let tableData = ref<any[]>([
  {
    date: '100',
    date2: '102',
    date3: '103',
    date4: '104',
    date5: '105',
    date6: '106',
    date7: '107',
    date8: '108',
    date9: '109',
  },
  {
    date: '90',
    date2: '100',
    date3: '110',
    date4: '120',
    date5: '130',
    date6: '140',
    date7: '150',
    date8: '160',
    date9: '170',
  },
  {
    date: '80',
    date2: '90',
    date3: '100',
    date4: '120',
    date5: '130',
    date6: '140',
    date7: '150',
    date8: '160',
    date9: '170',
  },
  {
    date: '70',
    date2: '80',
    date3: '103',
    date4: '104',
    date5: '105',
    date6: '106',
    date7: '107',
    date8: '108',
    date9: '109',
  },
  // 更多行...
])
let tableColumns = ref<any[]>([
  { prop: 'date', label: '2023-03-21 21点' },
  { prop: 'date2', label: '2023-03-21 22点' },
  { prop: 'date3', label: '2023-03-21 23点' },
  { prop: 'date4', label: '2023-03-22 21点' },
  { prop: 'date5', label: '2023-03-22 22点' },
  { prop: 'date6', label: '2023-03-22 23点' },
  { prop: 'date7', label: '2023-03-23 21点' },
  { prop: 'date8', label: '2023-03-23 22点' },
  { prop: 'date9', label: '2023-03-23 23点' },
  // 更多列...
])

let customTableData = ref<any[]>([])
let customTableThData = ref<any[]>([])

//这里是打印的配置项
const printObj = ref({
  id: 'printMe', //这里的id就是上面我们的打印区域id，实现指哪打哪
  popTitle: '配置页眉标题', // 打印配置页上方的标题
  extraHead: '最上方的头部文字', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  extraCss: 'printTable.css', // 打印时的样式,printTable.css在public文件里
  preview: false, // 是否启动预览模式，默认是false
  previewTitle: '预览的标题', // 打印预览的标题
  previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
  zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
  previewBeforeOpenCallback() {
    console.log('正在加载预览窗口！')
  }, // 预览窗口打开之前的callback
  previewOpenCallback() {
    console.log('已经加载完预览窗口，预览打开了！')
  }, // 预览窗口打开时的callback
  beforeOpenCallback() {
    console.log('开始打印之前！')
  }, // 开始打印之前的callback
  openCallback() {
    console.log('执行打印了！')
  }, // 调用打印时的callback
  closeCallback() {
    console.log('关闭了打印工具！')
  }, // 关闭打印的callback(无法区分确认or取消)
  clickMounted() {
    console.log('点击v-print绑定的按钮了！')
  },
})

function customTableDataFun() {
  tableData.value.forEach((item, index) => {
    customTableData.value[index] = {}
    tableColumns.value.forEach((item2, index2) => {
      customTableData.value[index][index2] = {
        prop: item[item2.prop],
      }
      customTableThData.value[index2] = {
        label: item2.label,
      }
    })
  })
}
customTableDataFun()
</script>

<style scoped lang="scss">
.btnBox {
  margin-bottom: 10px;
  .btn {
    margin-right: 10px;
  }
}
</style>
